<template>
  <div class="icons-container">
    <el-tabs type="border-card">
      <el-tab-pane label="Element-UI Icons" class="icon-box">
        <div v-for="item of elementIcons" :key="item" @click="selectedIcon(item)">
            <div class="icon-item">
              <i :class="'el-icon-' + item" />
              <span>{{ item }}</span>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import elementIcons from './element-icons'

export default {
  name: 'IconSelect',
  data() {
    return {
      elementIcons
    }
  },
  methods: {
    generateElementIconCode(symbol) { 
      return `<i class="el-icon-${symbol}" />`
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.elementIcons = elementIcons
    }
  }
}
</script>

<style scoped>
.icon-box{
  height: 400px;
  overflow-y: scroll;
}
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;
}
.icons-container  .icon-item {
    height: 85px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

.icons-container span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

.icons-container .disabled {
    pointer-events: none;
  }

</style>
